<template>
    <div>
        <div class="banner" @click="handleBannerClick">
            <img class='banner-img' src="https://dimg04.c-ctrip.com/images/300e0q000000g7qjl6A46_C_500_280.jpg" alt="">
            <div class="banner-info">
                <div class="banner-title">三亚5日自由行</div>
                <div class="banner-number">
                    <span class="iconfont banner-icon">&#xe755;</span>
                    39
                </div>
            </div>
        </div>
        <common-gallary :imgs="imgs" v-show="showGallary" @close="handleGalleryClose"></common-gallary>
    </div>
</template>
<script>
import CommonGallary from "../../../common/gallary/gallary";
export default {
  name: "detailBanner",
  components: {
    CommonGallary
  },
  data(){
      return {
          imgs: ["https://dimg04.c-ctrip.com/images/300e0q000000g7qjl6A46_C_500_280.jpg",
                "https://dimg04.c-ctrip.com/images/300e0q000000g7qjl6A46_C_500_280.jpg"
            ],
            showGallary:false
      }
  },
  methods:{
      handleBannerClick(){
          this.showGallary=true;
      },
      handleGalleryClose(){
          this.showGallary=false;
      }
  }
};
</script>
<style lang="stylus" scoped>
.banner {
    overflow: hidden;
    height: 0;
    padding-bottom: 55%;
    position: relative;

    .banner-img {
        width: 100%;
    }

    .banner-info {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        line-height: 0.6rem;
        color: #fff;
        background-image: linear-gradient(
            top,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.8)
        );

        .banner-title {
            flex: 1;
            font-size: 0.32rem;
            padding: 0 0.2rem;
        }

        .banner-number {
            margin-top: 0.14rem;
            padding: 0 0.4rem;
            height: 0.32rem;
            line-height: 0.32rem;
            border-radius: 0.2rem;
            background: rgba(0, 0, 0, 0.8);
            font-size: 0.24rem;

            .banner-icon {
                font-size: 0.24rem;
            }
        }
    }
}
</style>
